<template>
    <div class="approve_detail">
        <Header v-if="showHeader" :title="title"></Header>
        <div class="approve_opinion" v-if="pageName=='待我审批的'">
            <p>审批意见</p>
            <van-cell-group>
                <van-field 
                type="textarea" 
                rows="3"
                autosize 
                v-model="approveOpinion" 
                maxlength="255"
                show-word-limit
                placeholder="请输入审批意见" />
            </van-cell-group>
        </div>
        <h2 v-else class="postponed_status">{{status_desc}}</h2>
        <UserInfo :userInfo="userInfo" :fromPage="true"></UserInfo>
        <ReferData :ReferDataList="ReferDataList"></ReferData>
        <ApprovalStep :stepList="stepList" :activeStep="activeStep"></ApprovalStep>
        <van-tabbar :z-index="1000" v-if="pageName=='待我审批的'">
            <van-tabbar-item>
                <van-button size="normal" :disabled="approveOpinion.length<=0|| !approveOpinion" @click="submitApprove(1)">审批通过</van-button>
                <van-button size="normal" :disabled="approveOpinion.length<=0|| !approveOpinion" @click="submitApprove(2)">审批不通过</van-button>
            </van-tabbar-item>
        </van-tabbar>
        <Loading v-show = "showLoading"></Loading>
    </div>
</template>
<script>
import { applyDetail,submitCheck } from "@/request/api.js";
import UserInfo  from "@/components/business/UserInfo.vue";
import ReferData from "@/components/business/ReferData.vue";
import ApprovalStep from "@/components/business/ApprovalStep.vue";
import Header from "@/components/Header.vue";
import Loading from "@/components/Loading.vue";
export default {
    name:'ApproveDetail',
    data(){
        return {
            showHeader:this.$store.state.showHeader,
            title:'',
            showLoading:true,
            status_desc:'',
            userInfo:{
                fd_sta_name:'',
                fd_jobs_name:'',
                fd_sta_mobile:'',
                fd_sta_photo:'',
                apply_reason:'',
                start_time:'',
                end_time:'',
                history_apply_time:'',
                now_check_time_status:'',
                total_time:'',
                created_at:'',
                apply_img:[],
                check_last_time:''
            },
            ReferDataList:{
                rel_reg_num:'',
                open_app_num:'',
                tm_article_share_num:'',
                five_day_money:'',
                history_total_money:'',
                next_level_user_num:''
            },
            approveOpinion:'',
            pageName:'',
            stepList:[],
            activeStep:0,
            apply_image:[require('@/assets/images/static_images.png')]
        }
    },
    components:{
        UserInfo,
        ReferData,
        ApprovalStep,
        Loading,
        Header
    },
    mounted(){
        // console.log(localStorage.getItem('pageName'));
        this.pageName = localStorage.getItem('pageName');
        let id = this.$route.query.fd_sta_id;
        this.title = this.$route.query.title;
        applyDetail({token:this.$store.state.token,id:id}).then(res=>{
            // console.log(res.data)
            let data = res.data;
            this.title = data.apply_title;
            this.status_desc = data.status_desc;
            //用户基本信息
            this.userInfo.fd_sta_name = data.fd_sta_name;
            this.userInfo.fd_jobs_name = data.fd_jobs_name;
            this.userInfo.fd_sta_mobile = data.fd_sta_mobile;
            this.userInfo.fd_sta_photo = data.fd_sta_photo;
            this.userInfo.apply_title = data.apply_title;
            if (data.apply_img) {
                //https://dgtest.oss-cn-shenzhen.aliyuncs.com
                for(let i=0;i<data.apply_img.length;i++){
                    if (!data.apply_img[i]) {
                        data.apply_img.splice(data.apply_img[i],1)
                    }
                    // data.apply_img[i] = 'https://dgtest.oss-cn-shenzhen.aliyuncs.com' + this.GetUrlRelativePath(data.apply_img[i])
                    // console.log(data.apply_img[i])
                }
            }
            this.userInfo.apply_img = data.apply_img;
            this.userInfo.apply_reason = data.apply_reason;
            this.userInfo.start_time = data.start_time;
            this.userInfo.end_time = data.end_time;
            this.userInfo.history_apply_time = data.history_apply_time;
            this.userInfo.now_check_time_status = data.now_check_time_status;
            this.userInfo.total_time = data.total_time;
            this.userInfo.created_at = data.created_at;
            this.userInfo.check_last_time = data.check_last_time;
            //参考数据
            this.ReferDataList.rel_reg_num = data.rel_reg_num;
            this.ReferDataList.open_app_num = data.open_app_num;
            this.ReferDataList.tm_article_share_num = data.tm_article_share_num;
            this.ReferDataList.five_day_money = data.five_day_money;
            this.ReferDataList.history_total_money = data.history_total_money;
            this.ReferDataList.next_level_user_num = data.next_level_user_num;
            //审批流
            this.stepList = data.check_lines;
            this.showLoading = false;
        }).catch(error=>{
            console.log(error)
            this.showLoading = false;
        })
    },
    methods:{
        //获取相对路径
        GetUrlRelativePath(url){
            let arrUrl = url.split("//");
            let start = arrUrl[1].indexOf("/");
            let relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符
    　　　　if(relUrl.indexOf("?") != -1){
    　　　　　　relUrl = relUrl.split("?")[0];
    　　　　}
    　　　　return relUrl;
    　　},
        submitApprove(type){
            this.showLoading = true;
            // console.log('通过')
            let id = this.$route.query.fd_sta_id;
            let fa_staffer_id = localStorage.getItem("staffer_id");
            submitCheck({token:this.$store.state.token,fd_sta_id:fa_staffer_id,id:id,remark:this.approveOpinion,operate_type:type}).then(res=>{
                // console.log(res)
                this.showLoading = false;
                if (res.code==0) {
                    this.$toast({
                        duration: 1000,
                        message:res.msg
                    });
                    const timer = setTimeout(()=>{
                        if (this.pageName == '待我审批的') {
                            this.$router.push({name:'accraditation'})
                        } else {
                            this.$router.go(-1)
                        }
                    },500)
                    // 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
                    this.$once('hook:beforeDestroy', () => {
                        clearInterval(timer);
                    })
                }else{
                    this.$dialog.alert({
                        title:'提示',
                        message: res.msg
                    }).then(() => {
                        this.$router.go(-1)
                    });
                }
            }).catch(error=>{
                console.log(error)
                this.showLoading = false;
            })
        }
    },  
}
</script>
<style lang="less" scoped>
.approve_detail{
    width: 100%;
    height: auto;
    padding-bottom: 100px;
    box-sizing: border-box;
    .approve_opinion{
        width: 100%;
        height: auto;
        background: #fff;
        margin-bottom: 10px;
        padding: 10px 15px;
        box-sizing: border-box;
        color: #151617;
        font-size: 14px;
        p{
            line-height: 36px;
            font-weight: bold;
        }
        .van-hairline--top-bottom::after, .van-hairline-unset--top-bottom::after{border: none;}
        .van-cell{padding: 0;font-size: 14px;color: #999;}
    }
    .postponed_status{
        width: 100%;
        height: 50px;
        line-height: 50px;
        font-size: 15px;
        color: #fff;
        font-weight: bold;
        background: #02ccbd;
        padding: 0 15px;
        box-sizing: border-box;
        margin-bottom: 10px;
    }
    /deep/ .van-button--normal{
        font-size: 16px;
        font-weight: bold;
        background-color: #02ccbd;
        color: #fff;
        margin: 0 20px;
    }
}

</style>